<template>
  <page-header-wrapper>
    <page-tab-list>
      <a-table
        style="margin: 20px 0"
        size="default"
        :columns="columns"
        :data-source="list"
        :row-key="(record) => record.id"
        :pagination="false"
        :scroll="{ x: 'max-content' }"
      >
        <span slot="goodsInfo" slot-scope="text, record">
          <div class="goodsInfo">
            <a-avatar :src="record.goods_logo" shape="square" :size="48" icon="user" />
            <div class="info">
              <a-tooltip style="width: 100%">
                <template slot="title"> {{ record.goods_name }}</template>
                <span class="goodName">{{ record.goods_name }}</span>
              </a-tooltip>
              <a-tooltip style="width: 100%" v-if="record.goods_attr_name">
                <template slot="title"> {{ record.goods_attr_name }}</template>
                <span class="attrName">{{ record.goods_attr_name }}</span>
              </a-tooltip>
            </div>
          </div>
        </span>

        <span slot="created_at" slot-scope="text, record">
          {{ record.created_at > 0 ? $moment(record.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>

        <span slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="info(record)">分配</a-button>
        </span>
      </a-table>
    </page-tab-list>

    <a-modal
      :loading="modalLoading"
      title="填写信息"
      :visible="visible"
      @ok="submitForm"
      width="700px"
      @cancel="visible = false"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-model-item label="选择司机" prop="driver_id">
          <div class="flex">
            <a-input
              style="margin-right: 10px"
              class="inp"
              disabled
              placeholder="请选择司机"
              :value="driver_name"
            ></a-input>
            <a-button type="primary" @click="$refs['popDriverList'].visible = true"> 选择 </a-button>
          </div>
        </a-form-model-item>
        <a-form-model-item label="收货人姓名" prop="attr.store_name">
          <a-input placeholder="请输入收货人姓名" v-model="form.attr.store_name" allowClear></a-input>
        </a-form-model-item>
        <a-form-model-item label="收货人手机号" prop="attr.store_tel">
          <a-input placeholder="请输入收货人手机号" v-model="form.attr.store_tel" allowClear></a-input>
        </a-form-model-item>
        <a-form-model-item label="收货人地址" prop="attr.store_addr">
          <a-textarea
            v-model="form.attr.store_addr"
            placeholder="请输入收货地址"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
        <a-form-model-item label="收货经纬度" prop="attr.coordinate">
          <div class="flex">
            <a-input v-model="form.attr.coordinate" @blur="autoSortCoordinate" style="flex: 1; margin-right: 10px" />
            <a-button type="primary" @click="onClickSelectMap"> 选择 </a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <SelectMap
      :oldmarker="form.attr.coordinate"
      v-if="mapVisiable"
      :value.sync="mapVisiable"
      @onOk="selectMapOk"
    ></SelectMap>
    <popDriverList ref="popDriverList" @handle="handle"></popDriverList>
  </page-header-wrapper>
</template>
<script>
import { getOrderToLineErrList, setOrderToLine } from '@/api/driver'
import popDriverList from './components/popDriverList'
import SelectMap from '@/components/SelectMap/SelectMap'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '收获信息',
    scopedSlots: {
      customRender: 'goodsInfo',
    },
    width: 300,
  },
  {
    title: '商城名称',
    dataIndex: 'store_name',
  },
  {
    title: '商城电话',
    dataIndex: 'store_tel',
  },
  {
    title: '商城地址',
    dataIndex: 'store_addr',
    width: 300,
  },
  {
    title: '异常信息',
    dataIndex: 'errmsg',
  },
  {
    title: '生成时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
    sorter: (a, b) => a.created_at - b.created_at,
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  components: {
    popDriverList,
    SelectMap,
  },

  data() {
    return {
      columns,
      list: [],

      visible: false,
      form: {
        id: '',
        driver_id: '',
        attr: {
          store_tel: '',
          store_name: '',
          store_addr: '',
          coordinate: '',
        },
      },
      driver_name: '',
      rules: {
        'attr.store_tel': [{ required: true, message: '收货人手机号不能为空', trigger: 'blur' }],
        'attr.store_name': [{ required: true, message: '收货人姓名不能为空', trigger: 'blur' }],
        'attr.store_addr': [{ required: true, message: '收货地址不能为空', trigger: 'blur' }],
        'attr.coordinate': [{ required: true, message: '收货经纬度不能为空', trigger: 'change' }],
        driver_id: [{ required: true, message: '请选择司机', trigger: 'change' }],
      },
      modalLoading: false,
      mapVisiable: false,
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    async handle(type, item) {
      switch (type) {
        case 'select':
          this.driver_name = item.name
          this.form.driver_id = item.id
          this.$refs.popDriverList.visible = false
          break
      }
    },

    info(item) {
      this.visible = true
      this.form.id = item.id
      this.form.attr.store_name = item.store_name
      this.form.attr.store_tel = item.store_tel
      this.form.attr.store_addr = item.store_addr
      this.form.attr.coordinate = `${item.lat},${item.lng}`
    },

    // 获取数据列表
    async getList() {
      const hide = this.$message.loading('加载中', 0)

      const res = await getOrderToLineErrList()
      if (res.code == 0) {
        this.list = res.data || []
      }
      hide()
    },

    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))
          form.attr.coordinate = form.attr.coordinate.split(',')
          form.attr.lng = form.attr.coordinate[1]
          form.attr.lat = form.attr.coordinate[0]
          delete form.attr.coordinate
          this.modalLoading = true
          setOrderToLine(form)
            .then((res) => {
              this.modalLoading = false
              if (res.code !== 0) {
                this.$error({
                  content: res.msg,
                })
              } else {
                this.$message.success(res.msg)
                this.visible = false
                this.driver_name = ''
                this.$refs.ruleForm.resetFields()
                this.getList()
              }
            })
            .catch((err) => {
              this.$message.error(err.message)
              this.modalLoading = false
            })
        }
      })
    },

    autoSortCoordinate() {
      this.form.attr.coordinate = this.form.attr.coordinate.replace(/，/, ',')
      if (this.form.attr.coordinate.indexOf(',') !== -1) {
        this.form.attr.coordinate = this.form.attr.coordinate
          .split(',')
          .sort((v1, v2) => {
            return v1 - v2
          })
          .toString()
      }
    },

    onClickSelectMap: function () {
      this.mapVisiable = true
    },

    selectMapOk(e) {
      this.form.attr.coordinate = e
    },
  },
}
</script>

<style lang="less" scoped>
.goodsInfo {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 17px 0 17px 15px;
  img {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
  }
  .info {
    flex: auto;
    display: flex;
    width: 0;
    flex-direction: column;
    margin-left: 24px;
    .goodName,
    .attrName {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
    }
    .goodName {
      color: rgba(0, 0, 0, 0.85);
    }
    .attrName {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>
